<template>
  <div class="order-cancellation-page" style="background-color: #f8fafc; font-family: sans-serif; color: #1e293b; display: flex; flex-direction: column;">
    <!-- 主内容区域 -->
    <main style="flex-grow: 1; padding-bottom: 5rem; max-height: 500px; overflow: scroll">
      <div style="padding: 1rem; animation: fadeIn 0.3s ease-in-out;">
<!--
        &lt;!&ndash; 订单信息卡片 &ndash;&gt;
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 1rem; margin-bottom: 1rem;">
          <h2 style="font-weight: bold; font-size: 1.125rem;">{{ orderInfo.title }}</h2>
          <div style="display: flex; align-items: center; margin-top: 0.25rem;">
            <span :style="[getStatusClass(orderInfo.status), 'padding: 0.25rem 0.5rem', 'border-radius: 9999px', 'font-size: 0.625rem', 'font-weight: medium']">
              {{ orderInfo.statusText }}
            </span>
            <span style="font-size: 0.625rem; color: #64748b; margin-left: 0.5rem;">{{ orderInfo.createTime }}</span>
          </div>
        </div>
-->

        <!-- 退款金额显示 -->
        <div class="refund-amount-card" style="background: linear-gradient(90deg, #fee2e2, #fecaca); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; border: 1px solid #fca5a5;">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <div>
              <p style="color: #737f8c;">退款金额</p>
              <div style="margin-top: 0.25rem; display: flex; align-items: center;">
                <span style="font-size: 1.5rem; font-weight: bold; color: #dc2626;">¥{{ refundAmount }}</span>
                <span style="margin-left: 0.5rem; font-size: 0.75rem; color: #dc2626; cursor: pointer;" @click="toggleRefundAmountEdit">
                  <i class="fa-solid fa-pencil"></i> 编辑
                </span>
              </div>
            </div>
            <div style="background-color: rgba(239, 68, 68, 0.2); color: #b91c1c; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem;">
              <i class="fa-solid fa-info-circle" style="margin-right: 0.25rem;"></i> 可修改
            </div>
          </div>

          <!-- 退款金额编辑框 (默认隐藏) -->
          <div v-if="showRefundEditor" style="margin-top: 0.75rem;">
            <div style="display: flex; align-items: center;">
              <span style="font-size: 1.5rem; font-weight: bold; color: #dc2626; margin-right: 0.5rem;">¥</span>
              <input type="number" v-model.number="refundAmountInput" step="0.01" min="0" style="width: 6rem; border: 1px solid #d1d5db; border-radius: 0.25rem; padding: 0.25rem 0.5rem; text-align: right;">
              <span style="margin-left: 0.5rem; font-size: 0.75rem; color: #94a3b8;">元</span>
            </div>
            <div style="margin-top: 0.5rem; display: flex; justify-content: flex-end; gap: 0.5rem;">
              <button @click="cancelRefundEdit" style="padding: 0.25rem 0.75rem; font-size: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background-color: transparent; transition: background-color 300ms;">
                取消
              </button>
              <button @click="saveRefundAmount" style="padding: 0.25rem 0.75rem; font-size: 0.75rem; background-color: #3b82f6; color: white; border-radius: 0.375rem; transition: all 300ms;">
                保存
              </button>
            </div>
          </div>
        </div>

        <!-- 工单信息 -->
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 1rem; margin-bottom: 1rem;" v-if="workOrders.length>0">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
            <h3 style="font-weight: bold;">相关工单</h3>
            <span style="font-size: 0.75rem; color: #94a3b8;">{{ workOrders.length }}个工单</span>
          </div>

          <!-- 工单列表 -->
          <div v-for="(workOrder, index) in workOrders" :key="workOrder.srv_code" class="work-order-card" style="background-color: white; border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); padding: 1rem; margin-bottom: 0.75rem; border: 1px solid #e5e7eb;">
            <div style="display: flex; justify-content: space-between; align-items-start;">
              <div>
                <h4 style="font-weight: medium;">{{ workOrder.srv_type }}</h4>
                <p style="font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem;">工单编号: {{ workOrder.srv_code }}</p>
              </div>
              <span :style="[getStatusClass(workOrder.srv_sts), 'padding: 0.25rem 0.5rem', 'border-radius: 9999px', 'font-size: 0.625rem', 'font-weight: medium']">
                {{ workOrder.srv_sts }}
              </span>
            </div>

            <div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
              <div>
                <p style="font-size: 0.75rem; color: #94a3b8;">工单金额</p>
                <div style="margin-top: 0.25rem; display: flex; align-items: center;">
                  <span style="font-size: 1.125rem; font-weight: bold; color: #3b82f6;">¥{{ workOrder.srv_amount }}</span>
<!--                  <span style="margin-left: 0.5rem; font-size: 0.625rem; color: #3b82f6; cursor: pointer;" @click="toggleWorkOrderEdit(index)">-->
<!--                    <i class="fa-solid fa-pencil"></i> 编辑-->
<!--                  </span>-->
                </div>
              </div>
              <div style="text-align: right;">
                <p style="font-size: 0.75rem; color: #94a3b8;">创建时间</p>
                <p style="font-size: 0.75rem;">{{ workOrder.srv_date }}</p>
              </div>
            </div>

            <!-- 工单金额编辑框 (默认隐藏) -->
            <div v-if="showWorkOrderEditor === index" style="margin-top: 0.75rem;">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex; align-items: center;">
                  <span style="font-size: 1.125rem; font-weight: bold; color: #3b82f6; margin-right: 0.5rem;">¥</span>
                  <input type="number" v-model.number="workOrders[index].amountInput" step="0.01" min="0" style="width: 6rem; border: 1px solid #d1d5db; border-radius: 0.25rem; padding: 0.25rem 0.5rem; text-align: right;">
                  <span style="margin-left: 0.5rem; font-size: 0.75rem; color: #94a3b8;">元</span>
                </div>
                <div style="display: flex; gap: 0.5rem;">
                  <button @click="cancelWorkOrderEdit(index)" style="padding: 0.25rem 0.75rem; font-size: 0.625rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background-color: transparent; transition: background-color 300ms;">
                    取消
                  </button>
                  <button @click="saveWorkOrderAmount(index)" style="padding: 0.25rem 0.75rem; font-size: 0.625rem; background-color: #3b82f6; color: white; border-radius: 0.375rem; transition: all 300ms;">
                    保存
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 取消原因 -->
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 1rem; margin-bottom: 1rem;">
          <h3 style="font-weight: bold; margin-bottom: 0.75rem;">取消原因</h3>
          <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            <div v-for="(reason, index) in cancelReasons" :key="index" style="display: flex; align-items: center;">
              <div
                  :id="'cancel-reason-' + reason.value"
                  :class="['custom-radio', { selected: selectedCancelReason === reason.value }]"
                  @click="handleClick(reason.value,reason.label)"
                  style="width: 1rem; height: 1rem; border: 2px solid #d1d5db; border-radius: 50%; margin-right: 0.5rem; cursor: pointer;"
              ></div>
              <label :for="'cancel-reason-' + reason.value" style="font-size: 0.75rem; color: #475569; cursor: pointer;">{{ reason.label }}</label>
            </div>
          </div>
          <div style="margin-top: 0.75rem;">
            <label for="cancel-description" style="display: block; font-size: 0.75rem; font-weight: medium; color: #475569; margin-bottom: 0.25rem;">详细说明</label>
            <textarea v-model="cancelDescription" rows="2" style=" padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; transition: all 200ms;" placeholder="请详细描述取消原因..."></textarea>
          </div>
        </div>

        <!-- 备注 -->
        <div style="background-color: white; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 1rem; margin-bottom: 1rem;">
          <label for="notes" style="display: block; font-size: 0.75rem; font-weight: medium; color: #475569; margin-bottom: 0.25rem;">备注（选填）</label>
          <textarea v-model="notes" rows="2" style=" padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; transition: all 200ms;" placeholder="如有其他需要说明的内容，请在此填写..."></textarea>
        </div>

      </div>
    </main>
    <!-- 底部固定按钮 -->
    <div class="btn-fixed-bottom" >
      <div style="display: flex; justify-content: space-between;height: 42px;">
        <button  @click="handleCancel" style="flex: 1;  margin-right: 0.5rem; background-color: white; color: #3b82f6; border: 1px solid #3b82f6;  border-radius: 0.5rem; font-weight: 500; transition: all 300ms;">
          取消
        </button>
        <button @click="showConfirmModal" style="flex: 1; margin-left: 0.5rem; background-color: #ef4444; color: white;  border-radius: 0.5rem; font-weight: 500; transition: all 300ms;">
          确认取消订单
        </button>
      </div>
    </div>

    <!-- 确认模态框 -->
    <div v-if="showConfirmModalParam" class="confirm-modal-overlay" style="position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 50000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;"
         :style="{'opacity': confirmModalVisible ? '1' : '0', 'pointer-events': confirmModalVisible ? 'auto' : 'none'}">
      <div class="confirm-modal-content" style="background-color: white; border-radius: 1rem; padding: 1.5rem; max-width: 28rem; width: 100%; margin: 0 1rem; transform: scale(0.95); transition: all 300ms; transform-origin: center;"
           :style="{'transform': confirmModalVisible ? 'scale(1)' : 'scale(0.95)', 'opacity': confirmModalVisible ? '1' : '0'}">
        <div style="text-align: center;">
          <div style="width: 4rem; height: 4rem; background-color: #fee2e2; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;">
            <i class="fa-solid fa-exclamation-triangle" style="font-size: 1.5rem; color: #ef4444;"></i>
          </div>
          <h3 style="font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem;">确认取消订单</h3>
          <p style="color: #64748b; margin-bottom: 1.5rem;">您确定要取消此订单吗？取消后将按照退款金额进行退款，并关闭相关工单。</p>
          <div style="display: flex; gap: 0.75rem;">
            <button @click="hideConfirmModal" style="background-color: white; color: #3b82f6; border: 1px solid #3b82f6; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; transition: all 300ms; flex: 1;">
              取消
            </button>
            <button @click="confirmCancelOrder" style="background-color: #ef4444; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; transition: all 300ms; flex: 1;">
              确认取消
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 成功提示模态框 -->
    <div v-if="showSuccessModal" class="success-modal-overlay" style="position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 50; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;"
         :style="{'opacity': successModalVisible ? '1' : '0', 'pointer-events': successModalVisible ? 'auto' : 'none'}">
      <div class="success-modal-content" style="background-color: white; border-radius: 1rem; padding: 1.5rem; max-width: 28rem; width: 100%; margin: 0 1rem; transform: scale(0.95); transition: all 300ms; transform-origin: center;"
           :style="{'transform': successModalVisible ? 'scale(1)' : 'scale(0.95)', 'opacity': successModalVisible ? '1' : '0'}">
        <div style="text-align: center;">
          <div style="width: 4rem; height: 4rem; background-color: #dcfce7; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;">
            <i class="fa-solid fa-check" style="font-size: 1.5rem; color: #22c55e;"></i>
          </div>
          <h3 style="font-size: 1.25rem; font-weight: bold; margin-bottom: 0.5rem;">订单取消成功</h3>
          <p style="color: #64748b; margin-bottom: 1.5rem;">订单已成功取消，退款将在1-3个工作日内退回您的支付账户</p>
          <button @click="closeSuccessModal" style="background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; transition: all 300ms; width: 100%;">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';


// 组件属性定义
const props = defineProps({
  // 订单信息
  orderInfo: {
    type: Object,
    default: () => ({
      title: '现代简约风格全屋定制',
      status: 'pending',
      statusText: '待发货',
      createTime: '2025-06-16 09:30 下单',
      orderNo: 'ORD2025061600123',
      paymentMethod: '微信支付'
    })
  },
  // 初始退款金额
  initialRefundAmount: {
    type: Number,
    default: 5800.00
  },
  // 初始工单数据
  initialWorkOrders: {
    type: Array,
    default: () => [
      {
        id: 1,
        title: '量尺工单',
        status: 'processing',
        statusText: '处理中',
        workOrderNo: 'WO2025061700456',
        amount: 200.00,
        amountInput: 200.00,
        createTime: '2025-06-17 14:20'
      },
      {
        id: 2,
        title: '设计工单',
        status: 'completed',
        statusText: '已完成',
        workOrderNo: 'WO2025061800789',
        amount: 500.00,
        amountInput: 500.00,
        createTime: '2025-06-18 10:15'
      }
    ]
  }
});

// 组件事件定义
const emit = defineEmits([
  'cancel',             // 取消操作
  'cancelConfirmOrder',             // 取消操作
  'confirm',            // 确认取消
  'refundAmountUpdated', // 退款金额更新
  'workOrderAmountUpdated', // 工单金额更新
  'cancelOrderSuccess'  // 订单取消成功
]);

// 内部状态
const refundAmount = ref(props.initialRefundAmount);
const refundAmountInput = ref(props.initialRefundAmount);
const showRefundEditor = ref(false);

const workOrders = ref(props.initialWorkOrders);
const showWorkOrderEditor = ref(-1);

const cancelReasons = ref([
  { value: 'change-mind', label: '客户改变主意' },
  { value: 'price', label: '价格原因' },
  { value: 'quality', label: '质量问题' },
  { value: 'delivery', label: '交付延迟' },
  { value: 'other', label: '其他原因' }
]);
const cancelReasonName = ref('cancel-reason');
const selectedCancelReason = ref();
const selectedCancelLabel = ref();
const cancelDescription = ref('');

const notes = ref('');
const handleClick = (value,label) => {
  selectedCancelReason.value = value;
  selectedCancelLabel.value = label;
};
const showConfirmModalParam = ref(true);
const confirmModalVisible = ref(false);
const showSuccessModal = ref(true);
const successModalVisible = ref(false);

// 获取状态对应的类名
const getStatusClass = (status) => {
  switch(status) {
    case '': return 'bg-blue-100 text-blue-800';
    case '待处理': return 'bg-yellow-100 text-yellow-800';
    case 'completed': return 'bg-blue-100 text-blue-800';
    default: return 'bg-neutral-100 text-neutral-800';
  }
};

// 计算最终退款金额
const calculateFinalRefundAmount = () => {
  const orderAmount = refundAmount.value;
  let totalWorkOrderAmount = 0;

  workOrders.value.forEach(workOrder => {
    totalWorkOrderAmount += workOrder.amount;
  });

  return (orderAmount - totalWorkOrderAmount).toFixed(2);
};

// 编辑退款金额相关方法
const toggleRefundAmountEdit = () => {
  showRefundEditor.value = true;
};

const cancelRefundEdit = () => {
  showRefundEditor.value = false;
};

const saveRefundAmount = () => {
  refundAmount.value = parseFloat(refundAmountInput.value).toFixed(2);
  showRefundEditor.value = false;
  calculateFinalRefundAmount();
  emit('refundAmountUpdated', refundAmount.value);
};

// 编辑工单金额相关方法
const toggleWorkOrderEdit = (index) => {
  showWorkOrderEditor.value = index;
};

const cancelWorkOrderEdit = (index) => {
  workOrders.value[index].amountInput = workOrders.value[index].amount;
  showWorkOrderEditor.value = -1;
};

const saveWorkOrderAmount = (index) => {
  workOrders.value[index].amount = parseFloat(workOrders.value[index].amountInput).toFixed(2);
  showWorkOrderEditor.value = -1;
  calculateFinalRefundAmount();
  emit('workOrderAmountUpdated', workOrders.value[index].amount);
};

// 页面导航相关
const handleBack = () => {
  window.history.back();
};

const handleCancel = () => {
  confirmModalVisible.value = false;
  emit('cancel');
};

// 模态框相关
const showConfirmModal = () => {
  confirmModalVisible.value = true;
};

const hideConfirmModal = () => {
  confirmModalVisible.value = false;
};

const confirmCancelOrder = () => {
  hideConfirmModal();

  // 模拟处理取消订单
  setTimeout(() => {
    let  param = {
      cancel_reason: selectedCancelLabel.value,
      details_reason: cancelDescription.value,
      refund_demo: notes.value
    }
    emit('cancelConfirmOrder', param);
  }, 1000);
};
defineExpose({
  successModalVisible, // 直接暴露状态
})
const closeSuccessModal = () => {
  successModalVisible.value = false;

  // 返回上一页并触发取消成功事件
  setTimeout(() => {
    emit('cancelOrderSuccess',false);
  }, 300);
};

// 页面加载完成后执行
onMounted(() => {
  console.log(props.initialWorkOrders)
  console.log(props.initialRefundAmount)
  // 这里可以添加页面加载后的初始化逻辑
});
</script>

<style scoped lang="scss">
/* 基础工具类 */
.content-auto {
  content-visibility: auto;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 按钮样式 */
.btn-primary {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 300ms;
}

.btn-primary:hover {
  background-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.125rem);
}

.btn-secondary {
  background-color: white;
  color: #3b82f6;
  border: 1px solid #3b82f6;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 300ms;
}

.btn-secondary:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

.btn-danger {
  background-color: #ef4444;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 300ms;
}

.btn-danger:hover {
  background-color: #dc2626;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-0.125rem);
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.custom-radio {
  display: inline-block;
  position: relative;
}

.custom-radio.selected::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: #3b82f6;
  border-radius: 50%;
}
/* 金额输入框 */
.amount-input {
  width: 6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  text-align: right;
  transition: all 200ms;
}

.amount-input:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}
.btn-fixed-bottom {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 40;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}
</style>